<template>
    <div class="m-login">
        <div class="menu">
            <ul>
                <li v-for="(item,idx) in menuList"
                    @click="jump(item.url)"
                    :key="idx">
                    {{item.title}}
                </li>
            </ul>
        </div>
        <div class="login-background">
            <el-carousel indicator-position="none"
                arrow="never"
                height="100vh"
                class="">
                <el-carousel-item v-for="item in slideUrl"
                    :key="item">
                    <img :src="item">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- <div><img src="../assets/img/login/1.jpg"></div> -->
        <div class="popups">
            <div class="login-title">欢迎登录</div>
            <el-row>
                <el-col :span="18"
                    style="text-align:left;margin:30px 0;color:#333">每一天，乐在总结</el-col>
                <el-col :span="6"
                    style="margin:30px 0;color:aqua;text-align:center">更多详情</el-col>
            </el-row>
            <div class="login-inpupt">
                <el-input v-model="username"
                    placeholder="名称"></el-input>
                <el-input v-model="password"
                    @focus="forceName"
                    @blur="blur"
                    placeholder="密码"></el-input>
                <transition name="fade">
                    <p v-if="showForce"
                        class="title"><span class="iconfont icon-icons-" />忘记密码可以通过邮箱找回~</p>
                </transition>
            </div>
            <el-button style="width:90%">登录</el-button>
            <!-- <div class="abbr">
                <span style="float:left">注册</span>
                <span style="float:right">忘记密码</span>
            </div> -->
        </div>
    </div>
</template>
<script>
export default {
  layout: false,
  data() {
    return {
      showForce: false,
      username: "",
      password: "",
      //   在js中写入src路径需要使用require来请求，不然无法加载图片
      slideUrl: [
        require("../assets/img/login/1.jpg"),
        require("../assets/img/login/2.jpg"),
        require("../assets/img/login/3.png"),
        require("../assets/img/login/4.png")
      ],
      menuList: [
        { title: "注册账号", url: "/register" },
        { title: "忘记密码", url: "/forgetpw" },
        { title: "乐在沟通", url: "/forgetpw" },
        { title: "意见反馈" }
      ]
    };
  },
  methods: {
    jump(url) {
      this.$router.push(url);
    },
    forceName() {
      this.showForce = true;
    },
    blur() {
      this.showForce = false;
    }
  }
};
</script>
<style lang="scss">
@import "../assets/icon/iconfont.css";
.m-login {
  height: 100vh;
  .menu {
    position: fixed;
    right: 0;
    top: 0;
    height: 60px;
    line-height: 60px;
    margin-right: 50px;
    ul li {
      cursor: pointer;
      float: left;
      color: #000;
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      list-style: none;
      padding: 0 20px;
    }
  }
  .popups {
    width: 400px;
    height: 250px;
    background-color: transparent;
    position: fixed;
    left: 50%;
    top: 40%;
    margin-top: -125px;
    text-align: center;
    z-index: 99;
    input {
      width: 90%;
      margin: 0 20px 20px 20px;
    }
    .abbr {
      padding: 30px;
      box-sizing: border-box;
    }
  }
  .login-inpupt {
    .title {
      margin-top: -20px;
      padding: 20px 25px;
      font-size: 8px;
      text-align: left;
      color: aquamarine;
    }
  }
  .login-background {
    width: 30%;
    position: fixed;
    left: 0;
    bottom: 0;
    top: 0;
    // background-image: url("../assets/img/login.jpg");
    background-size: cover;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .login-title {
    font-size: 36px;
    text-align: left;
    line-height: 60px;
    height: 60px;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}
</style>